<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue Basics</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css" />
    <script src="https://unpkg.com/vue@next" defer></script>
    <script src="app.js" defer></script>
  </head>
  <body>
    <header>
      <h1>FriendList</h1>
    </header>
    <section id="app">
      <ul>
        <li>
          <h2>Manuel Lorenz</h2>
          <button>Show Details</button>
          <ul>
            <li><strong>Phone:</strong> 01234 5678 991</li>
            <li><strong>Email:</strong> manuel@localhost.com</li>
          </ul>
        </li>
        <li>
          <h2>Julie Jones</h2>
          <button>Show Details</button>
          <ul>
            <li><strong>Phone:</strong> 09876 543 221</li>
            <li><strong>Email:</strong> julie@localhost.com</li>
          </ul>
        </li>
      </ul>
    </section>
  </body>
</html>
